<template>
	<div class="am-cf am-padding am-padding-bottom-0">
		<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">信息列表</strong> / <small>List</small></div>
	</div>

	<hr>

	<div class="am-g">
		<div class="am-u-sm-12 am-u-md-6">
			<div class="am-btn-toolbar">
				<div class="am-btn-group am-btn-group-xs">
					<button type="button" class="am-btn am-btn-default" v-on:click="addForward()"><span class="am-icon-plus"></span> 新增</button>
					<button type="button" class="am-btn am-btn-default" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0, width: 400, height: 225}"><span class="am-icon-save"></span> 保存</button>
					<button type="button" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 审核</button>
					<button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
				</div>
			</div>
		</div>
		<div class="am-u-sm-12 am-u-md-3">
			<div class="am-form-group">
				<select data-am-selected="{btnSize: 'sm'}">
					<option value="option1">所有类别</option>
					<option value="option2">IT业界</option>
					<option value="option3">数码产品</option>
					<option value="option3">笔记本电脑</option>
					<option value="option3">平板电脑</option>
					<option value="option3">只能手机</option>
					<option value="option3">超极本</option>
				</select>
			</div>
		</div>
		<div class="am-u-sm-12 am-u-md-3">
			<div class="am-input-group am-input-group-sm">
				<input type="text" class="am-form-field">
				<span class="am-input-group-btn">
            <button class="am-btn am-btn-default" type="button">搜索</button>
          </span>
			</div>
		</div>
	</div>

	<div class="am-g">
		<div class="am-u-sm-12">
			<form class="am-form">
				<table class="am-table am-table-striped am-table-hover table-main">
					<thead>
						<tr>
							<th class="table-check"><input type="checkbox" /></th>
							<th class="table-id">ID</th>
							<th class="table-title">标题</th>
							<th class="table-type">类别</th>
							<th class="table-author am-hide-sm-only">作者</th>
							<th class="table-date am-hide-sm-only">修改日期</th>
							<th class="table-set">操作</th>
						</tr>
					</thead>
					<tbody>

						<tr v-for="item in infoList">
							<td><input type="checkbox" /></td>
							<td>{{item.id}}</td>
							<td>
								<a v-link="{ path: '/admin/crud/view'}">{{item.title}}</a>
							</td>
							<td>{{item.type}}</td>
							<td class="am-hide-sm-only">{{item.author}}</td>
							<td class="am-hide-sm-only">{{item.date}}</td>
							<td>
								<div class="am-btn-toolbar">
									<div class="am-btn-group am-btn-group-xs">
										<button class="am-btn am-btn-default am-btn-xs am-text-secondary" v-on:click="changeForward()"><span class="am-icon-pencil-square-o"></span> 编辑</button>
										<button class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
										<button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" 
											data-am-modal="{target: '#del-modal', closeViaDimmer: 0,width: 300}"><span class="am-icon-trash-o"></span> 删除</button>
									</div>
								</div>
							</td>
						</tr>

					</tbody>
				</table>
				<div class="am-cf">
					共 {{pageSize}} 条记录
					<div class="am-fr">
						<ul class="am-pagination">
							<li class="am-disabled">
								<a href="#">«</a>
							</li>

							<li v-for="n in pageSize" v-bind:class="{'am-active':((n+1)==pageNum)}">
								<a v-on:click="switchPage((n+1))">{{n+1}}</a>
							</li>

						</ul>
					</div>
				</div>
				<hr />
				<p>注：.....</p>
			</form>
		</div>

	</div>
	
	
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="doc-modal-1">
		<div class="am-modal-dialog">
			<div class="am-modal-hd">Modal 标题
				<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
			</div>
			<div class="am-modal-bd">
				<div class="am-input-group">
				  <span class="am-input-group-label"><i class="am-icon-user am-icon-fw"></i></span>
				  <input type="text" class="am-form-field" placeholder="Username">
				</div>
				<div class="am-input-group">
				  <span class="am-input-group-label"><i class="am-icon-lock am-icon-fw"></i></span>
				  <input type="text" class="am-form-field" placeholder="Password">
				</div>
				<button type="button" class="am-btn am-btn-primary">主色按钮</button>
			</div>
		</div>
	</div>
	
	
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="del-modal">
	  <div class="am-modal-dialog">
	    <div class="am-panel am-panel-default">
		  <div class="am-panel-hd">警告</div>
		  <div class="am-panel-bd">
			<button type="button" class="am-btn am-btn-danger" data-am-modal-close>确定</button>
			<button type="button" class="am-btn am-btn-secondary" data-am-modal-close>取消</button>
		  </div>
		</div>
	  </div>
	</div>
	
	
	<button type="button" class="am-padding-left-50xs am-btn am-btn-danger" data-am-modal-close>1确定1</button>
	
</template>

<script type="text/javascript">
	import utils from '../../../../src/utils.js';

	export default {
		data: function() {
			return {
				pageNum: 0,
				pageSize: 0,
				pageTotal: 0,
				rowTotal: 0,
				infoList: []
			};
		},
		created: function() {
			this.load(1);
		},
		watch: {
			"reload": function(value) {
				if(value) {
					this.load(1);
					this.reload = false;
				}
			}
		},
		methods: {
			load: function(pageNum) {

				var self = this;
				utils.get('/data/list' + pageNum + '.json', {}, function(rs) {

					self.pageNum = rs.pageNum;
					self.pageSize = rs.pageSize;
					self.pageTotal = rs.pageTotal;
					self.rowTotal = rs.rowTotal;
					self.infoList = rs.infoList;

				}, null, function(rs) {

				});
			},
			logout: function() {
				utils.logout();
			},
			addForward: function(item) {
				this.$router.go('/admin/crud/add');
				console.info("add");
			},
			changeForward: function(item) {
				this.$router.go('/admin/crud/change');
				console.info("changeForward");
			},
			switchPage: function(pageNum) {
				console.info(pageNum);
				this.load(pageNum);
			}
		}
	}
</script>

<style>

</style>